<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>积分后台管理</title>
		<link rel="stylesheet" type="text/css" href="css/to.css"/>
		<link rel="stylesheet" type="text/css" href="css/selectFilter.css"/>
		<link rel="stylesheet" type="text/css" href="css/admin.css?v=1.0.6"/>
		<link rel="icon" href="img/lei_huiyuan_on.png"  size="16x16" />
	</head>
	<body>
<div id="top">

</div>
		<div class="body content"  id="app">
			<div id="left">

			</div>

			<div class="right">

				<div class="liebie_title style_hei_16">
					<img src="img/xiugai.png">二维码列表
				</div>
        <div class="bottom">
              
         <div class="huiyuan_content_title">
         		<span class="" value="0" @click="changstatus('')" :class="is_invalid==''?'huiyuan_content_title_active':''">全部</span>
         		<span value="0"  @click="changstatus(0)" :class="is_invalid=='0'?'huiyuan_content_title_active':''">未使用</span>
         		<span value="1" @click="changstatus(1)" :class="is_invalid=='1'?'huiyuan_content_title_active':''">已使用</span>
         </div>
		 <div class="chaxun">
		     <div class="chaxun_list">
		 		积分：
		         <input type="text" v-model="num" placeholder="" style="padding-left: 10px;">
		 
		     </div>
		 
		     <div class="chaxun_anniu style_bai_14" @click="chaxun()">查询</div>
		 </div>


            <div class="tab_caozuo ">
                <div style="float:left;  margin-right:1rem;display: flex;align-items: center;" class="table_quanxuan">
                    <input type="checkbox" name="quanxuan" id="quanxuan" style="width:14px; height:14px;"> 全选
                </div>
                <div class="filter-box">
                    <div class="filter-text">
                        <input class="filter-title" type="text" readonly placeholder="操作方式"/>
                        <i class="icon icon-filter-arrow"></i>
                    </div>
                    <select name="filter">
                        <option value=""></option>
                        <option value="del">删除</option>
                    </select>
                </div>
                <input type="submit" name="Submit2" value="确定操作" class="queding style_bai_14">
            </div>
<div class="aaa">
	
</div>
            <!--------列表开始-------->
            <table width="100%" align="center" class="tab_top baoguo " border="0" cellspacing="0" cellpadding="0">
                <tr style="background-color: #FAFAFA;">
                    <td height="40" align="center" class="" width="50px">选择</td>
                    <td align="center" class="" width="80px">序号</td>
                    <td align="left" class="">简介</td>
                    <td align="left" class="">积分</td>
					<td align="left" class="">二维码</td>
					<td align="left" class="">状态</td>
                    <td align="left" class="">创建时间</td>
					<td align="left" class="">使用时间</td>
                    <td align="center" class="" width="150px">操作</td>
                </tr>
                
                <tr align="center" v-for="(item,index) in list"  v-cloak class="ma_table">
                    <td height="40" class=""><input type="checkbox" name="check" class="tab_xuanze" :value="item.id" ></td>
                    <td align="center" class="">{{index+1}}</td>
                    <td align="left" class="">{{item.description}}</td>
                    <td align="left" class="">{{item.points}}</td>
					<td align="left" class="ma_td">
						<div class="qrcode">
							<div class="qrcode_item"  :id="JSON.stringify(item)" hidden>
								
							</div>
							<img src="" alt="" class="erwei layui-layim-photos"/>
						</div>
						
						</td>
					<td align="left" class="">{{item.is_invalid==0?'未使用':'已使用'}}</td>
                    <td align="left" class="">{{item.created_at}}</td>
					<td align="left" class="">{{item.is_invalid==1?item.updated_at:''}}</td>
                    <td align="center" class=" style_lv_9 caozuo" >
                    	   <div class="dd_caozuo style_hong_14">
                    		 <p  class="ma_save" :id="item.id">下载二维码</p>
                    	   	 <p  @click="del(item.id)">删除</p>
                    	   </div>
                    </td>
                </tr>
                
            </table>


            <!--------分页列表开始-------->
            <ul class="pagination" v-cloak>
				<li @click="xuanye(item)" v-for="item in pageCount" :class="item==page?'pagination_on':''">{{item}}</li>
			</ul>


        </div>
			</div>
		</div>
<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="layer/layer.js" type="text/javascript" charset="utf-8"></script>
<script src="laydate/laydate.js" type="text/javascript" charset="utf-8"></script>
<script src="js/selectFilter.js" type="text/javascript" charset="utf-8"></script>
<script src="js/get.js" type="text/javascript" charset="utf-8"></script>
<script src="js/gong.js"></script>
<script src="js/fengzhuang.js"></script>
<script src="js/vue.js"></script>
<script src="js/qrcode.js?v=1.0.1"></script>
<script>
	var app = new Vue({
	    el: '#app',
	    data:{
	        list :[],
			page:1,
			limit:20,
			pageCount:0,
			is_invalid:'',
			num:''
	    },
		mounted(){
			this.get_list()
			
		},
		methods:{
			xuanye(page){
				this.page=page
				this.get_list()
			},
			changstatus(status){
				this.is_invalid=status+''
				this.get_list()
			},
			chaxun(){
				this.get_list()
			},
			get_list(){
				var data={
					'page':this.page,
					'limit':this.limit,
					points:this.num,
					is_invalid:this.is_invalid
				}
				
			    $.ajaxDirect("/api/getQrCodes",'get',data,
			     (obj)=> {
			    		  if(obj.code==200){
			    			  
			    			  this.list=obj.rows
							  this.pageCount=Math.floor(Number(obj.totalCount)/this.limit)
							  setTimeout(()=>{
								  zhixing(obj.rows)
							  },500)
                              
			    		  }
			    },
			    (err)=> {
			            //发送失败
			    })
			},
			del(id){
			    $.ajaxDirect("/api/deleteQrCode",'get',{
			    	ids:id
			    },
			     (obj)=> {
			    		  if(obj.code==200){
			    			  
			    			  
							  layer.msg('二维码已删除')
							  setTimeout(()=>{
							  		history.go(0);
							  								 
							  },500)
			
			    		  }
			    },
			    (err)=> {
			            //发送失败
			    })
			}
	
		}
	})	
	var dingshi=''
	function zhixing(){
		$('.qrcode_item').each(function(index,item){
			  var caozuo_item =$(item).attr('id')
			  caozuo_item=JSON.parse(caozuo_item)
			  $(item).qrcode({
			         text: caozuo_item.id+'',      // 二维码的内容
			         render: "canvas",               // 设置渲染方式
			         width: 100,                     // 设置宽度: 默认256
			         height: 100,                    // 设置高度: 默认256
			         background: "#ffffff",          // 背景颜色
			         foreground: "#000000",          // 前景颜色
			         src:caozuo_item.logo?caozuo_item.logo:'',                // logo地址, 图片居中, 图片为二维码的 1/9 为最佳，可适当调整，但是太大会影响二维码的内容
			         imgWidth: 40,                  // logo宽度
			         imgHeight: 40                  // logo高度
			     });
		})
		dingshi=setInterval(()=>{
			if($('.qrcode_item').eq($('.qrcode_item').length-1).has('canvas')){
				zhuanhuan()
			}
		},500)	
		
	}
	function zhuanhuan(){
		clearInterval(dingshi)
		$('canvas').each(function(index,item) {
			var canvas=this
			 // 创建新的canvas元素
			    var newCanvas = document.createElement('canvas');
			    var borderSize = 15; // 边框大小
			    newCanvas.width = canvas.width + borderSize * 2; // 增加左右边框
			    newCanvas.height = canvas.height + borderSize * 2; // 增加上下边框
			    
			    var context = newCanvas.getContext('2d');
			    
			    // 绘制白色背景
			    context.fillStyle = '#FFFFFF';
			    context.fillRect(0, 0, newCanvas.width, newCanvas.height);
			    
			    // 在白色背景上绘制原始canvas的内容
			    context.drawImage(canvas, borderSize, borderSize);
			    
			    // 将新的canvas转换为DataURL
			    var dataURL = newCanvas.toDataURL("image/png");
				 $(item).parents('.qrcode').find('img').show()
			    $(item).parents('.qrcode').find('img').attr('src',dataURL)
		});
	}
	$('body').on('click','.ma_save',function(){
		var id=$(this).attr('id')
		var dataUrl=$(this).parents('.ma_table').find('.erwei').attr('src')
		console.log(dataUrl)
		 var link = document.createElement('a');//创建一个新的<a>元素
		  link.download = `${id}.png`; // 设置下载文件的名称
		  link.href = dataUrl; // 设置href为图片的数据URL
		  document.body.appendChild(link); // 将链接元素添加到DOM中
		  link.click(); // 模拟点击链接以开始下载
		  document.body.removeChild(link); // 下载后移除链接元素，‌避免留在页面上
	})
</script>
<script type="text/javascript">
    $('.filter-box').selectFilter({
        callBack: function (val) {
            //返回选择的值
            console.log(val + '-是返回的值')
        }
    });
	var index = 0;
	$(document).on('click', '.layui-layim-photos', function(){
		var src = this.src; //图片地址
		index = layer.open({
			type: 1 //open的类型 1为页面层
			,shadeClose: true  ,//点击遮罩关闭
			closeBtn: 1,
			 title: false,
			  area: ['500px'], //宽高
			shade: "background-color: #000" //遮罩的颜色以及透明度(与官网不同)
			,content: '<div id="layui-layer-photos" style="width: 100%;"><img src="'+src+'" style="width: 100%;"/></div>' 
		});
	});
	 //点击图片关闭大图
	$(document).on('click', '#layui-layer-photos', function(){
		layer.close(index);
	  });

	
  $('.queding').on("click", function () {
        var str = [];
        $("input[name='check']:checked").each(function (index, item) {
            str.push($(this).val())
        });
        var menu = $('select[name="filter"]').val();
        console.log(str, menu)
        if(menu == 'del'){
           $.ajaxDirect('/api/deleteQrCode','get',{
           	   ids:str.toString()
           },
            (obj)=> {
           		  if(obj.code==200){
           			  
           			 layer.msg(obj.message)
           			 history.go(0);
           
           		  }
           },
           (err)=> {
                   //发送失败
           })
        }else{
            layer.open({content:'请选择正确操作'});
        }
    });

</script>

<script type="text/javascript">
    $('#quanxuan').click(function () {
        var flag = $(this).is(":checked");
        console.log(flag)
        $(":checkbox[name='check']").prop("checked", flag);
    })
    $('.tab_xuanze').click(function () {
        var flag = true;
        var tbodyO = $('.tab_xuanze')

        for (var j = 0; j < tbodyO.length; j++) {
            //只要存在没被勾选的复选框
            if (!tbodyO[j].checked) {
                //判断标识为假，不影响全选框
                flag = false;
                break;
            }
        }
        $('#quanxuan').prop("checked", flag)
    })
</script>
	</body>
</html>